<template>
  <div>
    <!-- 顶部菜单条 -->
    <div class="header-box">
      <el-row>
        <el-col :span="4">
          <i class="el-icon-notebook-2 select_icon"></i>
        </el-col>
        <el-col :span="16">
          <div>
            <div class="title">接 口 测 试 平 台</div>
          </div>
        </el-col>
        <el-col :span="4">
          <div style="display: flex; align-items: center">
            <img
              width="40px"
              height="40px"
              src="../assets/img/logo.png"
              style="margin-top:20px; padding-right:20px"
            />
            <el-dropdown @command="handleMenu">
              <span class="el-dropdown-link" style="color:#fff">
                <span>{{username}}</span>
                <i class="el-icon-arrow-down el-icon--right"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="select">切换项目</el-dropdown-item>
                <el-dropdown-item command="out">退出登录</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import 「组件名称」 from '「组件路径」';

export default {
  // import引入的组件需要注入到对象中才能使用
  components: {},
  props: {},
  data() {
    // 这里存放数据
    return {}
  },
  // 计算属性 类似于data概念
  computed: {
    username() {
      return window.sessionStorage.getItem('username')
    },
  },
  // 监控data中的数据变化
  watch: {},
  // 方法集合
  methods: {
    handleMenu(cmd) {
      if (cmd === 'out') {
        this.loginOut()
      } else if (cmd === 'select') {
        this.$router.push({ name: 'allProject' })
      }
    },
    loginOut() {
      window.sessionStorage.removeItem('token')
      this.$router.push({ name: 'Login' })
      this.$message({
        message: '已退出登录!',
        type: 'success',
      })
    },
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, // 生命周期 - 创建之前
  beforeMount() {}, // 生命周期 - 挂载之前
  beforeUpdate() {}, // 生命周期 - 更新之前
  updated() {}, // 生命周期 - 更新之后
  beforeDestroy() {}, // 生命周期 - 销毁之前
  destroyed() {}, // 生命周期 - 销毁完成
  activated() {}, // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style scoped>
.header-box {
  height: 80px;
  background: #000000;
}
.title {
  font: normal 28px/80px 'microsoft yahei';
  text-align: center;
  color: #fff;
}
.select_icon {
  color: #fff;
  font: normal 24px/80px 'microsoft yahei';
  text-indent: 20px;
}
</style>